<template>
	
	<view class="repair-detail">
		<view class="nav-bar">
		  <view class="back" @click="backPage"> 
		    <uni-icons type="left" size="20"></uni-icons> 
		  </view> 
		  <view class="title">维修详情</view> 
		  <view class="right"> 
		    <uni-icons type="more-filled" size="20"></uni-icons> 
		  </view> 
		</view> 
		<!-- 顶部导航 -->
<!-- 		<view class="nav-bar">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view class="title">详情</view>
			<view class="right-icons">
				<text class="iconfont">&#xe601;</text>
			</view>
		</view> -->

		<!-- 维修信息 -->
		<view class="info-section">
			<view class="section-title">维修信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">维修单号:</text>
					<text class="value">{{ reservationList.carTypeId }}</text>
				</view>
				<view class="info-item">
					<text class="label">车主姓名:</text>
					<text class="value">{{ reservationList.name }}</text>
				</view>
				<view class="info-item">
					<text class="label">联系方式:</text>
					<text class="value clickable" @tap="makePhoneCall">{{ reservationList.phone }}</text>
				</view>
				<view class="info-item">
					<text class="label">维修方式:</text>
					<text class="value">{{ getTypeText(reservationList.type) }}</text>
				</view>
				<view class="info-item" v-show="reservationList.type == 1">
				  <text class="label">取车位置:</text>
				  <text class="value clickable location" @tap="openLocation">{{ reservationList.location }}</text>
				</view>
				<view class="info-item">
					<text class="label">预约日期:</text>
					<text class="value">{{ reservationList.reservationTime }}</text>
				</view>
				<view class="info-item">
					<text class="label">提交日期:</text>
					<text class="value">{{ reservationList.submitTime }}</text>
				</view>
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="info-section">
			<view class="section-title">车辆信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">车辆类型:</text>
					 <text class="value">{{ reservationList.carTypeId }}</text>
				</view>
				<view class="info-item">
					<text class="label">车牌号:</text>
					<text class="value">{{ reservationList.carNum}}</text>
				</view>
				<view class="info-item">
					<text class="label">整车照片:</text>
				</view>
				<view class="image-preview">
					<image :src="reservationList.vehiclePhotos" mode="aspectFit"></image>
	
				</view>
				<view class="info-item">
					<text class="label">维修部位照片:</text>
				</view>
				<view class="image-grid">
					<image
					v-for="(photo, index) in reservationList.repairPhotos.split(',')" 
					:key="index" 
					:src="photo.trim()" 
					mode=""
					></image>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view
		 v-show="reservationList.status == 0"
			class="bottom-button"
			:class="{ disabled: arrived }"
			@tap="confirmArrival()"
		>
			{{ arrived ? '已到场' : '确认到场' }}
		</view>
		<view
		 v-show="reservationList.status == 1"
			class="bottom-button"
			:class="{ disabled: arrived }"
			@tap="confirmArrival2"
		>
			{{ arrived ? '完成' : '确认完成' }}
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import request from '/pages/utils/request.js';
import baseUrl from '../../../utils/urlConfig.js';



// 预约类型
function getTypeText(type) {
  const typeMap = {
    '0': '到店维修',
    '1': '上门维修'
  }
  return typeMap[type] || type
}
const arrived = ref(false)
// 获取信息
const queryParams = ref({
	id: '',
})
onLoad((options) => {
  queryParams.value.id= options.id
  queryByVerificationCode ()
})
const reservationList=ref()
// 根据用户id查询维修预约表
function queryByVerificationCode() {
	request({
		url: baseUrl + '/yyq/reservation/'+queryParams.value.id,
		method: 'get',
		success: (res) => {
			if (res.data && res.data.code === 200) { // 检查后端返回的状态码
				reservationList.value = res.data.data
				console.log(reservationList.value)
			}
		},
	})
}






// 返回上一页
const backPage = () => {
	uni.navigateBack()
}

// 拨打电话
const makePhoneCall = () => {
	uni.makePhoneCall({
		phoneNumber: repairInfo.value.phone
	})
}



// 打开位置
const openLocation = () => {
	// 这里需要集成地图API，获取具体经纬度
	uni.showToast({
		title: '打开位置信息',
		icon: 'none'
	})
}

// 预览图片
const previewImage = (current, urls) => {
	uni.previewImage({
		current,
		urls: urls || [current]
	})
}

// 确认到场
const confirmArrival = () => {
	if (arrived.value) return
	uni.showModal({
		title: '确认到场',
		content: '是否确认到场？',
		success: (res) => {
			if (res.confirm) {
				arrived.value = true
				uni.showToast({
					title: '已确认到场',
					icon: 'success'
				})
				reservationList.value.status=1
				request({
					url: baseUrl + '/yyq/reservation/',
					method: 'put',
					data:reservationList.value,
					success: () => {
						uni.$emit('refreshPage') // 添加这行
					}
				})
			}
		}
	})
}
// 确认完成
const confirmArrival2= () => {
	if (arrived.value) return
	uni.showModal({
		title: '确认完成',
		content: '是否确认完成？',
		success: (res) => {
			if (res.confirm) {
				arrived.value = true
				uni.showToast({
					title: '已确认完成',
					icon: 'success'
				})
				reservationList.value.status=2
				request({
					url: baseUrl + '/yyq/reservation/',
					method: 'put',
					data:reservationList.value,
					success: () => {
						uni.$emit('refreshPage') // 添加这行
					}
				})
			}
		}
	})
}
</script>

<style lang="scss">
.repair-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 100rpx;

	.nav-bar {
		background-color: #007AFF;
		color: #fff;
		padding: 10px 16px 10px;
		display: flex;
		align-items: center;
		
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 18px;
		}
		
		.right-icons {
			width: 24px;
		}
	}

	.info-section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.info-list {
			.info-item {
				display: flex;
				margin-bottom: 20rpx;
				
				.label {
					color: #666;
					width: 160rpx;
				}
				
				.value {
					flex: 1;
					color: #333;
					
					&.clickable {
						color: #007AFF;
					}
					
					&.location {
						display: flex;
						align-items: center;
						
						&::after {
							content: '';
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.image-preview {
		width: 100%;
		height: 300rpx;
		margin: 20rpx 0;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		
		image {
			width: calc((100% - 40rpx) / 3);
			height: 200rpx;
			border-radius: 8rpx;
		}
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #007AFF;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		&.disabled {
			background-color: #999 !important;
			color: #fff !important;
			pointer-events: none;
		}
	}
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 10rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 0rpx; left: 30rpx;}	 
</style>
